<template>
        <template v-for="(item, index) in props.menuData">
          <!-- 没有子菜单走这个逻辑 -->
          <el-menu-item @click="handleClick(item, `${props.index}-${item.meta.id}`)" v-if="!item.children || item.children.length == 0" :index="`${props.index}-${item.meta.id}`" :key="`${props.index}-${item.meta.id}`" >
          <!-- <el-icon><setting /></el-icon>
          <span>Navigator Four</span> -->
          <el-icon size="20">
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.name }}</span>
        </el-menu-item>
        <!-- 这里是子菜单部分 -->
        <el-sub-menu v-else :index="`${props.index}-${item.meta.id}`">
          <template #title>
            <el-icon size="20">
              <component :is="item.meta.icon"></component>
            </el-icon>
            <span>{{ item.meta.name }}</span>
          </template>
          <!-- 下面用了递归的方法 -->
          <tree-menu
          :index="`${props.index}-${item.meta.id}`"
          :menuData="item.children"
          >

          </tree-menu>
        </el-sub-menu>
        </template>
</template>

<script setup name="TreeMenu">
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
const props = defineProps(['menuData', 'index'])

const router = useRouter()

const store = useStore()
// console.log('###', props);
// 点击菜单
const handleClick = (item, active) => {
  // console.log(item, 'item');
  store.commit('addMenu', item.meta)
  store.commit('updateMenuActive', active)
  router.push(item.meta.path)
}


</script>

<style>

</style>